<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 网站管理 <span class="c-gray en">&gt;</span> 内容管理</nav>
	<div id="sectionContent" class="Hui-article">
		<article class="cl pd-20">
			<div class="mt-20">
					<table class="table">
						<tr>
							<td width="200" class="va-t">
								<div class="cl pd-5 bg-1 bk-gray">
										<span class="l">栏目菜单导航</span>
								</div>
								<ul id="systemMenus" class="ztree"></ul>
							</td>
							<td class="va-t">
								<input type="hidden" id="classification"/>
								<div class="text-c">
										内容名称:<input type="text" id="name" class="input-text" style="width:150px">
										<a href="javascript:;" class="btn btn-success" v-on:click="search()"><i class="Hui-iconfont">&#xe709;</i> 查询</a>
								</div>
								<div class="mt-20">
									<table class="table table-border table-bordered table-bg">
										<thead>
											<tr><th colspan="11" scope="col">
													<a v-on:click="addData()" class="btn size-M btn-primary"><i class="Hui-iconfont">&#xe604;</i> 添加</a>
											</th></tr>
											<tr class="text-c">
												<th>ID</th>
												<th>作者</th>
												<th>标题</th>
												<th>icon</th>
												<th>简介</th>
												<th>关键字</th>
												<th>标签</th>
												<th>发布时间</th>
												<th>可否访问</th>
												<th>创建时间</th>
												<th>操作</th>
											</tr>
										</thead>
										<tbody>
											<tr class="text-c" v-for="row in result.content">
												<td>{{row.id}}</td>
												<td>{{row.author}}</td>
												<td>{{row.title}}</td>
												<td title="{{row.linkIcon}}">
					                  <img v-bind:src="row.linkIcon" width="30" height="30" class="img" onerror="this.src='http://p3cxjq83j.bkt.clouddn.com/pic_not_found.png'"/>
					              </td>
												<td style="max-width: 150px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" title="{{row.introduction}}">{{row.introduction}}</td>
												<td>{{row.keywords}}</td>
												<td>{{row.labelTagNames}}</td>
												<td>{{row.releaseTime}}</td>
												<td v-if="row.online">
													<span style="color:red">停止访问</span>
												</td>
												<td v-else>
													<span style="color:green">发布访问</span>
												</td>
												<td>{{row.createTime | formatDate}}</td>
												<td>
													<a href="#!view/cms/article/article-edit.html?id={{row.id}}"><i class="Hui-iconfont">&#xe60c;</i>编辑</a>
													<a v-on:click="deleteData(row.id)" style="cursor:pointer"><i class="Hui-iconfont">&#xe6e2;</i>删除</a>
												</td>
											</tr>
										</tbody>
									</table>
									<div class="cl pd-5 bg-1 bk-gray mt-20">
											<span class="l">当前显示{{currentPageNumber}}/{{totalPage}}页,共{{totalSize}}条记录</span>
											<div id="Pagination" class="pagination r"/>
									</div>
							</td>
						</tr>
					</table>
			</div>
			</div>
		</article>
	</div>
<script>
      new Vue({
          el:'#sectionContent',
          http: authorization(),
          data:{
              result:{},
              pageSize:10,
              totalPage:1,
              totalSize:0,
              currentPageNumber:1
          },
          created:function(){
							this.$http.patch('/restful/cms/v1.0/clas/clastree').then((response) => {
									var setting = {
											data: {
													simpleData: {
															enable: true,
															pIdKey: "pid"
													}
											},
											callback: {
												onClick: this.zTreeOnClick
											}
									};
									var menus = new Array();
									responseObj(response).data.forEach(function(data){
										var menu = new Object();
										menu.id = data.id;
										menu.pid = data.parent;
										menu.name = data.claName;
										menus.push(menu);

										data.childs.forEach(function(childMenu){
												var child = new Object();
												child.id = childMenu.id;
												child.pid = childMenu.parent;
												child.name = childMenu.claName;
												menus.push(child);
										});
									});
									$.fn.zTree.init($("#systemMenus"), setting, menus);
							}).catch(function(response) {
									alert(errorMsg(response));
							});
              this.search();
          },
          methods:{
							zTreeOnClick:function(event, treeId, treeNode){
								 $('#classification').val(treeNode.id);
								 this.loadGrid(1,true);
							},
							addData:function(){
									var classification = $('#classification').val();
									if(classification == '' || classification.length == 0){
										alert('请选择栏目导航');
										return ;
									}
									window.parent.location.href='#!view/cms/article/article-add.html?classification='+classification;
							},
              deleteData:function(articleId){
                  if(!confirm("你确认删除数据吗？")){
                      return;
                  }
                  this.$http.delete('/restful/cms/v1.0/article?articleIds='+articleId).then((response) => {
                      this.search();
                  }).catch(function(response) {
                      alert(errorMsg(response));
                  });
              },
              pageselectCallback:function(currentPage){
                  if(currentPage == -1){
                      return true;
                  }
                  this.loadGrid(currentPage + 1,false);
                  return false;
              },
              search:function(){
                  this.loadGrid(1,true);
                  return;
              },
              loadGrid:function(pageNum,pagination){
                  this.currentPageNumber = pageNum;
                  this.$http.get('/restful/cms/v1.0/article/'+this.currentPageNumber+'/'+this.pageSize+"?title="+$("#name").val()+"&classification="+$('#classification').val()).then((response) => {
                      var content = responseObj(response).data;
                      this.result = content;
                      this.totalPage = content.totalPage;
                      this.totalSize = content.totalSize;
											if(pagination){
                            $("#Pagination").pagination(this.totalSize, {
                                current_page: -1,//当前选中的页面
                                num_edge_entries: 2, //两侧显示的首尾分页的条目数
                                num_display_entries: 5, //主体页数
                                link_to: 'javascript:void(0);',
                                items_per_page: this.pageSize,//每页显示数量
                                callback: this.pageselectCallback,
                                prev_text:'上一页',
                                next_text:'下一页'
                            });
                        }
                  }).catch(function(response) {
                      alert(errorMsg(response));
                  });
              }
          },
          filters: {
              formatDate:function(time) {
                  return new Date(time).format("yyyy-MM-dd hh:mm:ss");
              }
          }
      });
  </script>
